<template>
    <!-- 这里是布局组件 nav 的展开和伸缩 -->
    <div :class="['layout', isCollapse && 'collapse']">
    <!-- 侧边树   扁平化 多维转一维 -->
        <aside>
            <header>
                天瑞智能医疗系统
            </header>
            <!-- <el-menu class="el-menu-vertical-demo"
                background-color="#001529"
                text-color="#fff"
                active-text-color="#ffd04b"
                :collapse="isCollapse">
                因为层级不固定，所以需要动态的去渲染，需要递归，因此只能使用js，只能写render方法
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">用户</span>
                    </template>
                    <el-menu-item index="1-4-1">组织管理</el-menu-item>
                </el-submenu>
                <my-menu :newMenu="newMenu"/>
            </el-menu> -->
            <section>
                  <my-menu :newMenu="newMenu" :isCollapse="isCollapse"/>
            </section>
        </aside>
        <!-- 右侧主要路由视图 -->
        <main>
            <nav>
                <div class="left"><el-button size="small" icon="el-icon-s-fold" @click="isCollapse = !isCollapse" circle></el-button></div>
                <span>当前页面：首页</span>
                <div class="right"><el-col :span="12">
                    <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        {{userInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-edit">修改用户密码</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-switch-button" @click.native="logoutEvt">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
                </el-col></div>               
            </nav>
            <article>
                <router-view></router-view>
            </article>
        </main>
    </div>
</template>

<script>
import './Layout.less'
    //接收index.vue传过来的数据
    const MyMenu = {
        props: {
            newMenu: {
                type: Array,
                default: () => []
            },
            isCollapse: {
                type: Boolean,
                default: false
            }
        },
        //这里是渲染树状图
        render(createElement) {
            let list = this.loop(createElement, this.newMenu)
            console.log('aaaaaa',list)
            // < class=""
            //     background-color=""
            //     =""
            //     =""
            //     :collapse="isCollapse">
            return createElement(
                'el-menu',
                {
                    class: 'el-menu-vertical-demo',
                    props: {
                        'background-color': '#001529',
                        'text-color': '#fff',
                        'active-text-color': '#ffd04b',
                        collapse: this.isCollapse
                    }
                },
                list
            )
        },
        methods: {
            //递归子节点 并渲染
            loop(createElement, _list) {
                return _list.map(it => {
                    return !!it.children ?
                    createElement(
                        'el-submenu',
                        {
                            props: {
                                index: it.id
                            }
                        },
                        [
                            
                            createElement(
                                'template',
                                {
                                    slot: 'title'
                                },
                                [
                                    createElement(
                                        // 我们这里是将这个图标进行遍历渲染
                                        'i',
                                        {
                                            class: 'iconfont',
                                            domProps:{
                                                innerHTML:it.icon
                                            }
                                        }
                                    ),
                                    createElement(
                                        'span',
                                        {
                                            slot: 'title'
                                        },
                                        [ it.name ]
                                    )
                                ]
                            ),
                            ...(it.children
                            ?
                            this.loop(createElement, it.children)// []
                            :
                            [])
                        ]
                    )
                    :
                    createElement(
                        'el-menu-item',
                        {
                            props: {
                                index: it.id
                            },
                            on: {
                                click: this.toPage.bind(this, it)
                            }
                        },
                        [ it.name ]
                    )
                })
            },
            //点击跳转
            toPage(it) {
                // 执行路由跳转 -- 有权限判断
                this.$router.push(it.path)
            }
        }
    }

    export default {
        components: { MyMenu },
        data() {
            return {
                isCollapse: false,
                newMenu: [],
                //获取用户信息
                userInfo:this.$store.getters['common/userinfo'],
            }
        },
        computed: {
            //监听计算 菜单列表
            menuList() {
                return this.$store.getters['common/menuList']
            },
            //监听计算用户信息
            userinfo(){
                return this.$store.getters['common/userinfo']
            }
        },
        created() {
            //实现递归的方法
            let _menu = this.menuList
            function isEmpty(val) {
                return val === null || val === "" || val === undefined
            }

            function loop(pId) {
                let _list = _menu.filter(it => !pId ? isEmpty(it.parent_id) : it.parent_id === pId)
                
                _list = _list.map(it => {
                    // 有子节点递归
                    let hasChildren = _menu.findIndex(oo => oo.parent_id === it.id) > -1
                    // it.children = _menu.filter(child => child.parent_id === it.id)
                    if (hasChildren) it.children = loop(it.id)
                    return it
                })
                return _list
            }
            this.newMenu = loop()
        },
        methods: {
            logoutEvt() {
                console.log('-----------------------')
                localStorage.removeItem('user-code')
                this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                localStorage.removeItem("user-code")
                this.$router.push('/login')
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消操作'
                });
            });
            }
        }
    }
</script>

